<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三期：自动化Cursor规则生成工具 - AI为AI构建工具的实践指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 30px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 2.5em;
            color: #2c3e50;
            margin-bottom: 15px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header p {
            font-size: 1.2em;
            color: #7f8c8d;
            margin-bottom: 20px;
        }

        .nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .nav-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            font-size: 0.9em;
        }

        .nav-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        .content-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 2em;
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #667eea;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 60px;
            height: 3px;
            background: #764ba2;
        }

        .highlight-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin: 20px 0;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }

        .highlight-box h3 {
            margin-bottom: 15px;
            font-size: 1.3em;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin: 30px 0;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            border-left: 5px solid #667eea;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        .feature-card h4 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.2em;
        }

        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 10px;
            overflow-x: auto;
            margin: 20px 0;
            font-family: 'Consolas', 'Monaco', monospace;
            border-left: 5px solid #667eea;
        }

        .code-block pre {
            margin: 0;
            white-space: pre-wrap;
        }

        .architecture-diagram {
            background: #f8f9fa;
            border: 2px solid #667eea;
            border-radius: 15px;
            padding: 30px;
            margin: 25px 0;
            text-align: center;
        }

        .pipeline-flow {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }

        .pipeline-step {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            border-radius: 15px;
            min-width: 180px;
            text-align: center;
            position: relative;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .pipeline-step h4 {
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .arrow {
            font-size: 2em;
            color: #667eea;
            font-weight: bold;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .comparison-table th {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: bold;
        }

        .comparison-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
            background: white;
        }

        .comparison-table tr:nth-child(even) td {
            background: #f8f9fa;
        }

        .step-list {
            counter-reset: step-counter;
            list-style: none;
            padding: 0;
        }

        .step-list li {
            counter-increment: step-counter;
            padding: 20px;
            margin: 15px 0;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 5px solid #667eea;
            position: relative;
        }

        .step-list li::before {
            content: counter(step-counter);
            position: absolute;
            left: -15px;
            top: 15px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9em;
        }

        .tech-stack {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .tech-item {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .tech-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .tech-item h4 {
            color: #667eea;
            margin-bottom: 10px;
        }

        .warning-box {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-left: 5px solid #fdcb6e;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .warning-box h4 {
            color: #856404;
            margin-bottom: 10px;
        }

        .success-box {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            border-left: 5px solid #28a745;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .success-box h4 {
            color: #155724;
            margin-bottom: 10px;
        }

        .command-box {
            background: #1e1e1e;
            color: #00ff00;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
            overflow-x: auto;
        }

        .info-box {
            background: #e3f2fd;
            border: 1px solid #bbdefb;
            border-left: 5px solid #2196f3;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .info-box h4 {
            color: #0d47a1;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2em;
            }
            
            .pipeline-flow {
                flex-direction: column;
            }
            
            .arrow {
                transform: rotate(90deg);
            }
            
            .nav {
                gap: 10px;
            }
            
            .nav-btn {
                padding: 8px 16px;
                font-size: 0.8em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部标题 -->
        <header class="header">
            <h1>第三期：自动化Cursor规则生成工具</h1>
            <p>探索awesome-cursor-rules-mdc：用AI为AI构建工具的革命性实践</p>
            <nav class="nav">
                <a href="#introduction" class="nav-btn">工具简介</a>
                <a href="#architecture" class="nav-btn">系统架构</a>
                <a href="#installation" class="nav-btn">安装配置</a>
                <a href="#demo" class="nav-btn">实战演示</a>
                <a href="#advanced" class="nav-btn">高级技巧</a>
            </nav>
        </header>

        <!-- 工具简介 -->
        <section id="introduction" class="content-section">
            <h2 class="section-title">🚀 工具简介：解决Cursor规则编写的痛点</h2>
            
            <div class="highlight-box">
                <h3>💡 核心理念：用AI为AI构建工具</h3>
                <p>awesome-cursor-rules-mdc项目代表了一种革命性的思路：利用AI技术自动化为Cursor AI编程助手生成高质量的指导规则。这是"用AI为AI构建工具"的完美范例。</p>
            </div>

            <div class="feature-grid">
                <div class="feature-card">
                    <h4>⚡ 自动化生成</h4>
                    <p>彻底告别手动编写规则的繁琐过程，通过AI自动搜集最佳实践并生成结构化的.mdc规则文件</p>
                </div>
                <div class="feature-card">
                    <h4>🎯 社区驱动</h4>
                    <p>由真实的社区需求驱动，解决了Cursor从.cursorrules向.mdc格式迁移过程中的实际问题</p>
                </div>
                <div class="feature-card">
                    <h4>🔍 语义搜索</h4>
                    <p>采用Exa AI搜索引擎，能够理解查询意图，发现高质量的技术文档和最佳实践</p>
                </div>
                <div class="feature-card">
                    <h4>🤖 智能合成</h4>
                    <p>利用Gemini等大型语言模型，将原始信息提炼为结构化、可执行的规则文件</p>
                </div>
            </div>

            <div class="info-box">
                <h4>🌟 项目背景</h4>
                <p>该项目源于Cursor社区论坛的热烈讨论。随着Cursor推出新的.mdc规则系统，许多开发者对如何编写高质量规则感到困惑。作者sanjeed5响应社区需求，开发了这个自动化工具，成功将社区知识转化为可复用的自动化解决方案。</p>
            </div>
        </section>

        <!-- 系统架构 -->
        <section id="architecture" class="content-section">
            <h2 class="section-title">🏗️ 系统架构：三支柱设计解析</h2>
            
            <div class="architecture-diagram">
                <h3 style="color: #2c3e50; margin-bottom: 20px;">三阶段处理流水线</h3>
                <div class="pipeline-flow">
                    <div class="pipeline-step">
                        <h4>📝 输入定义</h4>
                        <p>rules.json配置</p>
                        <small>定义目标库和标签</small>
                    </div>
                    <div class="arrow">→</div>
                    <div class="pipeline-step">
                        <h4>🔍 语义搜索</h4>
                        <p>Exa API调用</p>
                        <small>智能搜集最佳实践</small>
                    </div>
                    <div class="arrow">→</div>
                    <div class="pipeline-step">
                        <h4>🧠 内容合成</h4>
                        <p>LLM处理</p>
                        <small>生成结构化规则</small>
                    </div>
                </div>
            </div>

            <div class="feature-grid">
                <div class="feature-card">
                    <h4>支柱一：输入定义 (rules.json)</h4>
                    <p>工作流程的起点，通过JSON数组定义需要生成规则的库及其标签。这是用户唯一需要手动配置的部分。</p>
                    <div class="code-block">
                        <pre>{
  "libraries": [
    {
      "name": "sveltekit",
      "tags": ["javascript", "framework"]
    },
    {
      "name": "tailwindcss", 
      "tags": ["css", "framework"]
    }
  ]
}</pre>
                    </div>
                </div>
                
                <div class="feature-card">
                    <h4>支柱二：语义智能 (Exa API)</h4>
                    <p>采用专为AI设计的语义搜索引擎，能够理解查询深层意图，精准发现高质量的技术文档和社区讨论。</p>
                    <ul style="margin-top: 10px;">
                        <li>• 理解语义而非仅匹配关键词</li>
                        <li>• 专注技术文档和Stack Overflow</li>
                        <li>• 发现利基但高质量的结果</li>
                    </ul>
                </div>
                
                <div class="feature-card">
                    <h4>支柱三：内容合成 (Gemini LLM)</h4>
                    <p>将搜索结果与指令模板结合，通过大型语言模型进行综合、提炼、结构化和格式化。</p>
                    <ul style="margin-top: 10px;">
                        <li>• 智能信息提炼与总结</li>
                        <li>• 结构化Markdown输出</li>
                        <li>• 遵循Cursor规则最佳实践</li>
                    </ul>
                </div>
            </div>

            <div class="warning-box">
                <h4>⚠️ 架构洞察</h4>
                <p>选择Exa而非传统搜索引擎是关键决策。最终规则质量直接取决于搜索阶段获取信息的质量。如果某个库生成的规则质量不佳，很可能是因为该库在网络上缺乏高质量、结构化的文档。</p>
            </div>
        </section>

        <!-- 安装配置 -->
        <section id="installation" class="content-section">
            <h2 class="section-title">⚙️ 安装配置：零基础上手指南</h2>
            
            <div class="highlight-box">
                <h3>🔧 环境要求</h3>
                <p>Python 3.8+、uv包管理器、Exa API密钥、Gemini API密钥</p>
            </div>

            <ol class="step-list">
                <li>
                    <strong>安装Python和uv包管理器</strong>
                    <div class="command-box">$ curl -Ls https://astral.sh/uv/install.sh | sh</div>
                </li>
                
                <li>
                    <strong>克隆项目仓库</strong>
                    <div class="command-box">$ git clone https://github.com/sanjeed5/awesome-cursor-rules-mdc.git
$ cd awesome-cursor-rules-mdc</div>
                </li>
                
                <li>
                    <strong>安装依赖</strong>
                    <div class="command-box">$ uv sync --index-url https://pypi.tuna.tsinghua.edu.cn/simple                    </div>
                </li>
                
                <li>
                    <strong>配置API密钥</strong>
                    <div class="command-box">$ cp .env.example .env</div>
                    <p>编辑.env文件，填入你的API密钥：</p>
                    <div class="code-block">
                        <pre>GEMINI_API_KEY="your_gemini_api_key"
EXA_API_KEY="your_exa_api_key"</pre>
                    </div>
                </li>
                
                <li>
                    <strong>首次运行测试</strong>
                    <div class="command-box">$ uv run src/generate_mdc_files.py --test</div>
                </li>
            </ol>

            <div class="feature-grid">
                <div class="feature-card">
                    <h4>🔑 获取Exa API密钥</h4>
                    <p>访问 <a href="https://exa.ai/" target="_blank">exa.ai</a> 注册账户，新用户通常获得免费API请求额度。</p>
                </div>
                <div class="feature-card">
                    <h4>🔑 获取Gemini API密钥</h4>
                    <p>访问 <a href="https://aistudio.google.com/" target="_blank">Google AI Studio</a> 使用Google账户登录创建API密钥。</p>
                </div>
            </div>

            <div class="info-box">
                <h4>📋 配置文件详解 (config.yaml)</h4>
                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>配置项</th>
                            <th>说明</th>
                            <th>默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>llm_provider</td>
                            <td>LLM提供商选择</td>
                            <td>gemini</td>
                        </tr>
                        <tr>
                            <td>model</td>
                            <td>具体模型名称</td>
                            <td>gemini-pro</td>
                        </tr>
                        <tr>
                            <td>rate_limit</td>
                            <td>API调用速率限制(/分钟)</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>workers</td>
                            <td>并行工作线程数</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>output_dir</td>
                            <td>输出目录</td>
                            <td>rules-mdc</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 实战演示 -->
        <section id="demo" class="content-section">
            <h2 class="section-title">🎬 实战演示：现代Next.js技术栈"黄金规则集"</h2>
            
            <div class="highlight-box">
                <h3>🎯 演示场景</h3>
                <p>为一个现代全栈Web应用生成完整的规则集，涵盖前端、后端、样式和状态管理。</p>
            </div>

            <div class="tech-stack">
                <div class="tech-item">
                    <h4>Next.js</h4>
                    <p>React全栈框架</p>
                    <small>App Router、SSR、API Routes</small>
                </div>
                <div class="tech-item">
                    <h4>Tailwind CSS</h4>
                    <p>原子化CSS框架</p>
                    <small>功能类、响应式设计</small>
                </div>
                <div class="tech-item">
                    <h4>Supabase</h4>
                    <p>后端即服务</p>
                    <small>数据库、认证、API</small>
                </div>
                <div class="tech-item">
                    <h4>TanStack Query</h4>
                    <p>数据获取库</p>
                    <small>缓存、同步、状态管理</small>
                </div>
            </div>

            <div class="step-list">
                <li>
                    <strong>更新rules.json配置</strong>
                    <div class="code-block">
                        <pre>[
  { "name": "nextjs", "tags": ["javascript", "framework", "react"] },
  { "name": "tailwindcss", "tags": ["css", "framework"] },
  { "name": "supabase", "tags": ["backend", "database", "auth"] },
  { "name": "tanstack-query", "tags": ["javascript", "data-fetching"] }
]</pre>
                    </div>
                </li>
                
                <li>
                    <strong>执行批量生成</strong>
                    <div class="command-box">$ uv run src/generate_mdc_files.py --regenerate-all --tag javascript</div>
                </li>
                
                <li>
                    <strong>验证生成结果</strong>
                    <p>检查rules-mdc/目录下生成的四个.mdc文件，每个文件都包含对应技术栈的最佳实践。</p>
                </li>
                
                <li>
                    <strong>应用到Cursor项目</strong>
                    <p>将生成的规则文件复制到项目的.cursor/rules/目录中，立即获得AI编程助手的智能指导。</p>
                </li>
            </ol>

            <div class="success-box">
                <h4>✅ 期望成果</h4>
                <p>生成的规则将指导Cursor在以下方面表现出色：</p>
                <ul>
                    <li>• Next.js App Router和服务端组件最佳实践</li>
                    <li>• Tailwind CSS的原子化设计理念</li>
                    <li>• Supabase的安全认证和数据处理</li>
                    <li>• TanStack Query的缓存和状态管理</li>
                </ul>
            </div>

            <div class="feature-card" style="margin-top: 20px;">
                <h4>🎯 实际应用示例</h4>
                <p>向Cursor发出指令：</p>
                <div class="code-block">
                    <pre>@nextjs.mdc @tailwindcss.mdc @supabase.mdc @tanstack-query.mdc

请创建一个新的路由/products，从Supabase的products表获取数据，
使用TanStack Query管理状态，用Tailwind CSS创建响应式网格布局。</pre>
                </div>
                <p><strong>结果：</strong>Cursor将生成完全符合四个技术栈最佳实践的代码，包括正确的App Router结构、服务端组件、状态管理和样式设计。</p>
            </div>
        </section>

        <!-- 高级技巧 -->
        <section id="advanced" class="content-section">
            <h2 class="section-title">🚀 高级技巧：掌握生成工作流</h2>
            
            <div class="feature-grid">
                <div class="feature-card">
                    <h4>📊 命令行参数详解</h4>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>参数</th>
                                <th>功能</th>
                                <th>示例</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>--test</td>
                                <td>测试模式，仅处理一个库</td>
                                <td>调试新配置</td>
                            </tr>
                            <tr>
                                <td>--library</td>
                                <td>指定单个库</td>
                                <td>精确控制</td>
                            </tr>
                            <tr>
                                <td>--tag</td>
                                <td>按标签批量处理</td>
                                <td>分类管理</td>
                            </tr>
                            <tr>
                                <td>--regenerate-all</td>
                                <td>强制重新生成所有规则</td>
                                <td>更新规范</td>
                            </tr>
                            <tr>
                                <td>--verbose</td>
                                <td>详细日志输出</td>
                                <td>故障排查</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="feature-card">
                    <h4>🔧 高效工作流示例</h4>
                    <div class="code-block">
                        <pre># 重新生成Python相关规则
$ uv run src/generate_mdc_files.py --regenerate-all --tag python

# 测试新库规则生成
$ uv run src/generate_mdc_files.py --library new-library --verbose

# 批量处理前端技术栈
$ uv run src/generate_mdc_files.py --tag javascript --tag css</pre>
                    </div>
                </div>
            </div>

            <div class="warning-box">
                <h4>🔍 故障排查指南</h4>
                <ol>
                    <li><strong>检查日志：</strong>查看src/logs/generation.log确认API调用状态</li>
                    <li><strong>验证原始数据：</strong>检查exa_results/目录中的JSON文件质量</li>
                    <li><strong>优化查询：</strong>调整rules.json中的库名称，使其更具特异性</li>
                    <li><strong>API限制：</strong>调整config.yaml中的rate_limit和workers参数</li>
                </ol>
            </div>

            <div class="info-box">
                <h4>💡 扩展知识库</h4>
                <p>添加新库支持只需三步：</p>
                <ol>
                    <li>在rules.json中添加库配置</li>
                    <li>运行生成器：<code>--library new-library</code></li>
                    <li>验证并调整生成的规则文件</li>
                </ol>
            </div>

            <div class="success-box">
                <h4>🤝 回馈社区</h4>
                <p>如果生成了高质量规则并在实际项目中验证有效，建议通过GitHub Pull Request分享给社区。你的贡献将帮助成千上万的开发者！</p>
            </div>
        </section>

        <!-- 总结 -->
        <section class="content-section">
            <h2 class="section-title">🎯 总结与展望</h2>
            
            <div class="highlight-box">
                <h3>🚀 awesome-cursor-rules-mdc的价值</h3>
                <p>这个工具不仅仅是自动化，更是社区知识的赋能者。它极大降低了Cursor新规则系统的使用门槛，让整个社区能够更广泛、深入地受益于.mdc系统的强大功能。</p>
            </div>

            <div class="feature-grid">
                <div class="feature-card">
                    <h4>🎊 立即行动</h4>
                    <ol>
                        <li>克隆项目仓库并完成配置</li>
                        <li>为你的技术栈生成第一套规则</li>
                        <li>在实际项目中验证效果</li>
                        <li>根据需要进行个性化调整</li>
                        <li>向社区分享你的成功经验</li>
                    </ol>
                </div>
                
                <div class="feature-card">
                    <h4>🌟 关键收获</h4>
                    <ul>
                        <li><strong>效率倍增：</strong>从手动编写到自动生成</li>
                        <li><strong>质量保证：</strong>基于社区最佳实践</li>
                        <li><strong>持续进化：</strong>AI技术推动工具链优化</li>
                        <li><strong>生态繁荣：</strong>社区协作创造更大价值</li>
                    </ul>
                </div>
            </div>

            <div class="info-box">
                <h4>📚 相关资源</h4>
                <ul>
                    <li>• 项目仓库：<a href="https://github.com/sanjeed5/awesome-cursor-rules-mdc" target="_blank">awesome-cursor-rules-mdc</a></li>
                    <li>• Cursor官方文档：<a href="https://docs.cursor.com/context/rules" target="_blank">Rules - Cursor</a></li>
                    <li>• 社区论坛：<a href="https://forum.cursor.com/" target="_blank">Cursor Community Forum</a></li>
                    <li>• Exa搜索API：<a href="https://exa.ai/" target="_blank">Exa.ai</a></li>
                    <li>• Google AI Studio：<a href="https://aistudio.google.com/" target="_blank">AI Studio</a></li>
                </ul>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="content-section" style="text-align: center; background: rgba(255, 255, 255, 0.8);">
            <p style="color: #7f8c8d; margin-bottom: 10px;">
                🎬 第三期视频分享资料 | 探索AI开发工具的无限可能
            </p>
            <p style="color: #95a5a6; font-size: 0.9em;">
                制作时间：2025年1月 | 基于awesome-cursor-rules-mdc项目
            </p>
            <div style="margin-top: 20px;">
                <a href="#introduction" class="nav-btn" style="margin: 0 5px;">返回顶部</a>
                <a href="https://github.com/sanjeed5/awesome-cursor-rules-mdc" target="_blank" class="nav-btn" style="margin: 0 5px;">GitHub项目</a>
            </div>
        </footer>
    </div>

    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 代码块点击复制
        document.querySelectorAll('.code-block, .command-box').forEach(block => {
            block.style.cursor = 'pointer';
            block.title = '点击复制代码';
            block.addEventListener('click', function() {
                const text = this.textContent;
                navigator.clipboard.writeText(text).then(() => {
                    // 简单的反馈效果
                    const originalBg = this.style.backgroundColor;
                    this.style.backgroundColor = '#4CAF50';
                    setTimeout(() => {
                        this.style.backgroundColor = originalBg;
                    }, 200);
                });
            });
        });

        // 动态加载效果
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // 为所有内容区块添加动画
        document.querySelectorAll('.content-section').forEach(section => {
            section.style.opacity = '0';
            section.style.transform = 'translateY(20px)';
            section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(section);
        });
    </script>
</body>
</html> 